<template>
  <div class="show-invoice">
    <a-spin :spinning="loading">
      <div class="base-info">
        <div class="title">基础信息</div>
        <a-form :model="formState" name="basic" :label-col="{ style: 'width:90px' }" :wrapper-col="{ style: 'calc(100% - 90px)' }" autocomplete="off">
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item class="emphasis-item" label="运单号" name="waybillNum">
                {{ formState.waybillNum }}
              </a-form-item>
            </a-col>
            <a-col v-for="(item, index) in formItemColumn" :key="index" :span="8">
              <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
                <template v-if="item.name === 'addressType'">
                  {{ getLabelByDict("WAYBILL_TYPE", formState[item.name]) }}
                </template>
                <template v-else-if="item.name === 'customsDeclarationTitle'">
                  {{ formState[item.name] }}
                </template>
                <template v-else>{{ formState[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="box-info">
        <div class="title">装箱信息</div>
        <div class="tip">
          <span>材质： {{ formState.materialQualityName || "" }}</span>
          <div>
            <span>申报币种: {{ formState.channelCurrency || "-" }}</span> <span>总申报价值：{{ formState.declaredValue || "0" }}</span>
          </div>
        </div>
        <div class="list">
          <vxe-table border show-overflow="title" height="95%" :row-config="{ isHover: true }" :data="formState.preOrderShipmentBox" :scroll-y="{ enabled: true, gt: 20 }">
            <vxe-column field="fbaBoxNumber" title="FBA箱号" min-width="200" fixed="left"></vxe-column>
            <vxe-column field="poNumber" title="PO Number" min-width="120"></vxe-column>
            <vxe-column field="productEnglishName" title="产品英文名" min-width="120"></vxe-column>
            <vxe-column field="productChineseName" title="产品中文名" min-width="100"></vxe-column>
            <vxe-column field="productDeclarePrice" title="产品申报单价" min-width="100"></vxe-column>
            <vxe-column field="productDeclareNum" title="产品申报数量" min-width="100"></vxe-column>
            <vxe-column field="productDeclarePriceAll" title="产品申报总价" min-width="100"></vxe-column>
            <vxe-column field="productMaterial" title="产品材质" min-width="120"></vxe-column>
            <vxe-column field="productHsCode" title="产品海关编码" min-width="120"></vxe-column>
            <vxe-column field="productFunction" title="产品用途" min-width="100"></vxe-column>
            <vxe-column field="productBrand" title="产品品牌" min-width="120"></vxe-column>
            <vxe-column field="productModen" title="产品型号" min-width="120"></vxe-column>
            <vxe-column field="productImgUrl" title="产品图片链接" min-width="120"></vxe-column>
            <vxe-column field="productSaleUrl" title="产品销售链接" min-width="120"></vxe-column>
            <vxe-column field="customerBoxWeight" title="货箱重量(KG)" min-width="100"></vxe-column>
            <vxe-column field="customerBoxLength" title="货箱长度(CM)" min-width="100"></vxe-column>
            <vxe-column field="customerBoxWidth" title="货箱宽度(CM)" min-width="100"></vxe-column>
            <vxe-column field="customerBoxHeight" title="货箱高度(CM)" min-width="100"></vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import CommonHook from "@/hook/commonHook";
import { formItemColumn } from "./data";
import InitHook from "./composables/initHook";
import { toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: ClientWaybillManagement.WaybillDetails;
  }>(),
  {}
);
const { visible, passData } = toRefs(props);
const { getLabelByDict } = CommonHook();
const { formState, loading, init } = InitHook();
init(passData.value.id);
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init(passData.value.id);
    }
  }
);
</script>
<style lang="stylus" scoped>
.show-invoice{
    .title{
        font-weight: 600;
        padding: 12px;
    }
    .base-info{
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .emphasis-item {
          color: #fe8100;
          > :deep(.ant-form-item-label){
            >label{
              color: #fe8100;
            }
          }
        }
        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
    }
    .box-info{
      margin-top: 12px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 4px 0px #ccc;
      font-weight: 600;
      .tip{
        display: flex;
        justify-content: space-between;
        padding: 0 12px;
        >div{
            color: #fe8100;
            >span:nth-child(1){
                margin-right: 8px;
            }
        }
      }
      .list{
        padding: 12px;
        height: calc(100vh - 450px);
      }
    }
}
</style>
